// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/menu-list';

// This custom styling should be replaced when the component is redesigned upstream in Protocol
.mzp-c-menu-list.is-details {
    display: block;

    .mzp-c-menu-list-title.is-summary {
        margin: 0;

        button {
            padding: $spacing-sm;
            @include bidi((
                (padding-right, ($spacing-sm + 42px), $spacing-sm),
                (padding-left, $spacing-sm, ($spacing-sm + 42px)),
                (text-align, left, right),
            ));
            border-radius: $border-radius-md;
            border: 2px solid $color-marketing-gray-30;
            text-decoration: none;
            transition: border-color 100ms ease, background-color 100ms ease;

            &:hover {
                background: $color-marketing-gray-20;
                border-color: $color-marketing-gray-40;

                &::before {
                    border-color: $color-marketing-gray-40;
                }
            }

            &:focus,
            &[aria-expanded='true'] {
                background-color: transparent;
                border-color: $color-link;
                box-shadow: 0 0 2px 0 $color-blue-20;

                &::before {
                    border-color: $color-link;
                }
            }

            &::before {
                @include bidi((
                    (right, 42px, left, auto),
                    (border-left-width, 2px, 0),
                    (border-right-width, 0, 2px),
                ));
                border-left: solid $color-marketing-gray-30;
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                top: 0;
                transition: border-color 100ms ease;
                width: 0;
            }

            &::after {
                @include bidi(((right, 0, left, auto),));
                background-position: center center;
                height: 100%;
                width: 42px;
            }
        }
    }

    .mzp-c-menu-list-list {
        margin-top: $spacing-sm;
        right: 0;
        z-index: 3;
    }
}
